<template>
	<view>
		<view class="empty-container" v-if="postList.length ===0">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/comment.png">
			</u-empty>
		</view>

		<view class="moment-container" v-else>
			<u-search placeholder="请输入关键字" v-model="searchText" @clear="clearText" @search="search" @custom="search"
				:animation="true">
			</u-search>
			<view class="u-demo-block__content" style="margin-top: 10px;">
				<u-skeleton rows="2" title :loading="false" avatar rowsHeight="14" v-for="(item,i) in postList"
					:key="i">
					<!-- 需要在外部多嵌套一层占位view，否则在nvue下会导致样式失效 -->
					<view>
						<view class="u-skeleton-slot">
							<image :src="item.avatar" class="u-skeleton-slot__image"></image>
							<view class="u-skeleton-slot__content">
								<u--text v-html="item.title" type="main" size="16">
									<rich-text slot="text"></rich-text>
								</u--text>
								<u--text :type="tips" size="14" customStyle="margin-top: 5px"
									:text="item.content"></u--text>
								<image v-if="item.pictures" v-for="(item1,i1) in item.pictureLsit" :key="i1"
									:src="item1" style="width: 80px;" mode="widthFix">
								</image>
							</view>
						</view>
					</view>
					<u-gap height="10"></u-gap>
				</u-skeleton>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				postList: [],
				current: 1,
				pageSize: 10,
				searchText: '',
			};
		},
		onLoad() {
			this.getPostList()
		},
		methods: {
			async getPostList() {
				let {
					data: res
				} = await uni.$http.get(`/user/post/search`, {
					current: this.current,
					pageSize: this.pageSize,
					searchText: this.searchText,
				})
				if (res.code === 20000) {
					this.postList = res.data
					this.postList.forEach((val, idx) => {
						this.postList[idx].pictureLsit = JSON.parse(this.postList[idx].pictures)
					})

				} else {
					uni.$showMsg(res.msg)
				}
			},
			clearText() {
				this.getPostList()
			},
			async search() {
				let {
					data: res
				} = await uni.$http.get('/user/post/search', {
					current: this.current,
					pageSize: this.pageSize,
					searchText: this.searchText,
				})
				if (res.code === 20000) {
					this.postList = res.data.records

				} else {
					uni.$showMsg(res.msg)
				}
			},
		}
	}
</script>

<style lang="scss">
	.u-skeleton-slot {
		@include flex;
		align-items: flex-start;

		&__image {
			width: 40px;
			height: 40px;
			border-radius: 100px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}
</style>